<template>
  <div class="servicer-box">
    <ul>
      <li
        class="img-box"
        v-for="(item, index) in imgs"
        :key="index"
        @click="newsIn(index)"
      >
        <img class="img" :src="item.img" alt="" />
        <div class="text-box">
          <div class="text">{{ item.title }}</div>
          <div class="text2">{{ item.date }}</div>
        </div>
      </li>
    </ul>
    <div class="more" @click="active()">查看更多>></div>
  </div>
</template>

<script>
import newsInfo from '@/utils/newsInfo'
export default {
  name: 'Message',
  data() {
    return {
      pageSize: 6,
      currentPage: 1,
      loadText: '加载中...',
      loading: false,
      imgs: []
    }
  },
  mounted() {
    this.getNewsInfo()
    if (newsInfo.length <= 10) {
      this.loading = true
    }
  },
  methods: {
    active() {
      this.$router.push('/news')
    },
    getNewsInfo() {
      this.imgs.push(
        ...newsInfo.slice(
          this.pageSize * (this.currentPage - 1),
          this.pageSize * this.currentPage
        )
      )
    },
    newsIn(index) {
      this.$router.push({ path: '/details', query: { index: index } })
    }
  }
}
</script>

<style lang="scss" scoped>
.servicer-box {
  padding: 0 0.3rem;
  padding-bottom: 1.03rem;
}
.img-box {
  background: #f4f4f4;
  display: flex;
  align-items: center;
  margin-bottom: 0.18rem;
}
.img {
  width: 2.9rem;
  height: 1.9rem;
}
.text-box {
  padding: 0 0.2rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 1.5rem;
}
.text {
  font-size: 0.28rem;
  font-weight: 400;
  color: #555555;
  line-height: 0.39rem;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -webkit-box;
}
.text2 {
  font-size: 0.24rem;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #999999;
  line-height: 0.35rem;
}
.more {
  width: 2.99rem;
  height: 0.79rem;
  border: 0.02rem solid #666666;
  color: #666666;
  text-align: center;
  font-size: 0.28rem;
  line-height: 0.79rem;
  margin: 0.5rem auto 0;
}
</style>
